<template>
  <div class="issue-detail" @click.stop>
    <div class="top">
      <div class="botton-area">
        <!-- 预览 -->
        <el-button size="mini" type="success" @click="preView">
          {{ $t('button.viewRichText') }}
        </el-button>
        <!-- 保存 -->
        <el-button v-if="!viewState" size="mini" type="primary" @click="save">
          {{ $t('button.save') }}
        </el-button>
        <!-- 删除 -->
        <el-button v-if="viewState" size="mini" type="danger" @click="rowDelete">
          {{ $t('button.delete') }}
        </el-button>
        <el-button size="mini" type="primary" @click="viewState = !viewState">
          {{ viewState ? $t('button.edit') : $t('button.view') }}
        </el-button>
      </div>
    </div>
    <div class="bottom">
      <div style="height:60px"></div>
      <IssueView v-if="viewState" ref="issueView" :issueDesc="richTextData" :rowData="rowData" />
      <IssueEdit v-else ref="issueEdit" :issueDesc="richTextData" :rowData="rowData" />
    </div>
  </div>
</template>
<script>
import IssueView from './IssueView'
import IssueEdit from './IssueEdit'
export default {
  name: 'IssueDetail',
  components: {
    IssueView,
    IssueEdit
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => null
    },
    richTextData: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      /** 查看模式 */
      viewState: true
    }
  },
  methods: {
    /** 预览 */
    preView() {
      if (this.viewState) {
        this.$refs['issueView'].preView()
      } else {
        this.$refs['issueEdit'].preView()
      }
    },
    /** 删除 */
    rowDelete() {
      this.$bus.$emit('issue-delete', this.rowData)
    },
    /** 保存 */
    save() {
      this.$refs['issueEdit'].save()
    }
  }
}
</script>
<style lang="scss" scoped>
.issue-detail {
  width: 100%;
  height: 100%;
  .top {
    position: absolute;
    left: 0;
    right: 16px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 1;
    span {
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }
    .botton-area {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .bottom {
    height: 100%;
    overflow: auto;
  }
}
</style>
